<template>
    <page-view class="flex flex-row">

        <LeftMenu />

        <div class="flex-1 bg-slate-700 overflow-auto right flex flex-col">
            <div class="nav-bar h-[55px] border-0 border-b border-solid
             border-gray-300 bg-white flex justify-between items-center px-[5px]">
             <el-icon @click="toggleIsCollapse" size="20px" class="cursor-pointer ">
                    <Fold class="hover:text-primaryColor transition-all" />
                </el-icon>
                <div class="history-list space-x-[4px]">
                    <router-link :to="{name:item.routeName}" v-for="item in historyList" :key="item.routeName" #default="{navigate,isActive}">
                    
                        <div class="history-item" :class="{active:isActive}" @clicl="navigate">
                            {{item.title}}
                            <span v-if="item.routeName!='DataView'" class="close"    @click.stop="store.removeHisotryByRouteName(item.routeName)">x</span>
                        </div>
                    </router-link>
                </div>

                <el-dropdown @command="handleCommand">
                    <span class="">
                        欢迎登陆：<span class="text-primaryColor">{{loginUserInfo?.admin_name}}</span>
                        <el-icon class="el-icon--right">
                            <ArrowDown />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>我的信息</el-dropdown-item>
                            <el-dropdown-item>修改密码</el-dropdown-item>

                            <el-dropdown-item divided command="logOut">退出登陆</el-dropdown-item>

                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex-1 bg-[#f5f7f9] overflow-auto p-5 box-border">
                <router-view />
            </div>
        </div>
    </page-view>
</template>

<script setup>

import LeftMenu from "../components/LeftMenu.vue";
import { Fold, ArrowDown } from "@element-plus/icons-vue";
import { mainStore } from "../store";
import { storeToRefs } from "pinia";

import { ElMessageBox } from "element-plus";
import { useRouter } from "vue-router"

const store = mainStore();
// const isCollapse=computed(()=>store.isCollapse);
const { isCollapse, historyList,loginUserInfo } = storeToRefs(store);


const router = useRouter();
const toggleIsCollapse = () => {
    store.setIsCollapse(!store.isCollapse);
}

const handleCommand = (command) => {
    switch (command) {
        case "logOut":
            logOut();
            break;
    }
}

const logOut = () => {
    ElMessageBox.confirm("你确定要退出吗?", "系统提示", {
        confirmButtonText: '确定退出',
        cancelButtonText: '我点错了',
        type: 'warning',
    }).then(() => {
        store.logOut();
        router.replace({ name: 'Login' })``
    }).catch(() => {

    })
}

</script>


<style lang="scss" scoped>
.history-list {
    @apply box-border px-[4px] flex-1 h-full flex flex-row items-center;

    .history-item {
        @apply border relative border-solid text-gray-700 border-gray-700 border-current h-[30px] px-[5px] text-[12px] flex flex-row justify-center items-center;

        &:hover {
            @apply text-primaryColor;
            .close{
                display: flex;
            }
        }
        .close {
            border: 1px solid currentColor;
            @apply w-[10px] h-[10px] absolute -right-[5px] -top-[5px] rounded-full flex flex-row items-center justify-center bg-white;
            display: none;
            &:hover {
                @apply text-white bg-red-500;
            }
            &.active{
                @apply bg-primaryColor text-white border-gray-600;
            }
        }
    }
}
</style>